<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟路由</title>
    <script src="/js/js/vue.js"></script>
    <script src="/js/js/axios.js"></script>
</head>
<body>
    <div id="app">
        <a href="#/zhuye">主页</a>
        <a href="#/keji">科技</a>
        <!-- 动态切换组件 -->
        <component :is="mycon"></component>
    </div>
    <script>

        var zhuye={
            template:`<h1>主页内容</h1>`
        }

        var keji={
            template:`<h1>科技板块内容</h1>`
        }

        

        var vm=new Vue({
            el:'#app',
            data:{
                mycon:'zhuye'
            },components:{
                zhuye,
                keji
            }
        })
        // 地址栏更新
        window.onhashchange=function(){
            let name=location.hash.substring(2);
            console.log('更新',location.hash);
            vm.mycon=name;
        }
    </script>
</body>
</html>